<template>
  <div>
    <div v-if="showdetail" @close="showdetail = false" :is="nextTask" :groupNumber="groupNumber" :detailId="groupNumber" @success="refreshList()" :progressType="progressType"></div>
    <div v-else>
      <basic-container>
        <div class="flex_between">
          <div class="flex_start">
            <el-input placeholder="任务关键字" size="medium" v-model="input3" class="input-with-select" prefix-icon="el-icon-search" @keyup.enter.native="searchClick()">
              <el-button slot="append" type="primary" class="main_btn" @click="searchClick()">搜索</el-button>
              <el-select class="w120" v-model="workType" slot="prepend" placeholder="请选择">
                <el-option label="待办任务" value="1"></el-option>
                <el-option label="已完成任务" value="2"></el-option>
                <el-option label="我发起的任务" value="3"></el-option>
              </el-select>
            </el-input>
          </div>
          <div class="" style="white-space: nowrap">
            <b v-if="topNodesMenu.length != 0">常用功能入口：</b>
            <el-button type="primary" class="main_btn" v-for="(item, index) in topNodesMenu" :key="index">
              <router-link :to="item.path" style="color: #ffffff">{{ item.name }}</router-link>
            </el-button>
            <el-button type="primary" plain class="ml10" @click="showAction = true">设置常用功能</el-button>
          </div>
        </div>
      </basic-container>

      <!-- 待办任务 -->
      <basic-container>
        <div class="flex_start mb10">
          <span class="main_title">待办任务</span>
          <el-radio-group class="ml30" v-model="currentPage.type" size="small" @change="getagencyTaskPage">
            <el-radio-button label="0">签名任务</el-radio-button>
            <el-radio-button label="1">解密任务</el-radio-button>
            <el-radio-button label="2">设定期限任务</el-radio-button>
          </el-radio-group>
          <el-button type="primary" size="mini" class="ml30" icon="el-icon-refresh" @click="getagencyTaskPage">刷新</el-button>
        </div>
        <el-table :data="waiteList" v-loading="currentPage.loading">
          <el-table-column prop="belong" label="任务归属" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.type != 100">{{ scope.row.belong }}</span>
              <span v-else>文件解密申请</span>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="文件编号/管理编号">
            <template slot-scope="scope">
              <span v-if="scope.row.type != 100">{{ progressLists[scope.row.processType] }}-待{{ progressTypes[scope.row.type] }}</span>
              <span v-else>文件解密申请-待解密</span>
            </template>
          </el-table-column>
          <el-table-column label="文件/记录">
            <template slot-scope="scope">
              <span v-if="scope.row.type != 100">{{ progressLists[scope.row.processType] }}-待{{ progressTypes[scope.row.type] }}</span>
              <span v-else>文件解密申请-待解密</span>
            </template>
          </el-table-column>
          <!-- sortable 排序 -->
          <el-table-column prop="createTime" label="任务发出时间"></el-table-column>
          <el-table-column label="审批历史详情">
            <template slot-scope="scope">
              <span v-if="scope.row.type != 100">{{ progressLists[scope.row.processType] }}-待{{ progressTypes[scope.row.type] }}</span>
              <span v-else>文件解密申请-待解密</span>
            </template>
          </el-table-column>
          <el-table-column label="工作流状态">
            <template slot-scope="scope">
              <span class="warn_f" v-if="scope.row.type != 100">待{{ progressTypes[scope.row.type] }}</span>
              <span v-else>待解密</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <span class="nosee_f" v-if="scope.row.type == 0">前往APP签名</span>
              <span class="nosee_f" v-else-if="scope.row.type == 100">前往APP查看</span>
              <span class="main_co pointer" @click="godo(scope.row)" v-else>去{{ progressTypes[scope.row.type] }}</span>
            </template>
          </el-table-column>
          <empty slot="empty" text="暂无待办任务"></empty>
        </el-table>
        <el-card class="pub_right">
          <el-pagination @size-change="sizeChangeHandle($event, 0)" @current-change="currentChangeHandle($event, 0)" :current-page.sync="currentPage.pageNo" :page-sizes="[4, 8, 12, 14, 16]" :page-size.sync="currentPage.size" layout="total,sizes, prev, pager, next" :total.sync="currentPage.total"> </el-pagination>
        </el-card>
      </basic-container>
      <!-- 待办任务 -->

      <basic-container>
        <div class="flex_start mb10">
          <span class="main_title">我发起的任务</span>
          <el-radio-group class="ml30" v-model="initiatePage.type" size="small" @change="launchList">
            <el-radio-button label="0">签名任务</el-radio-button>
            <el-radio-button label="1">解密任务</el-radio-button>
          </el-radio-group>
          <el-button type="primary" size="mini" class="ml30" icon="el-icon-refresh" @click="launchList">刷新</el-button>
          <el-button type="primary" plain size="mini" class="ml30" @click="handleDelect(1)">删除</el-button>
          <span class="ml10 nosee_f f12"
            >共 {{ initiatePage.total }} 条可选数据 <span v-if="initiatePage.selectList.length != 0">， 已选中 {{ initiatePage.selectList.length }} 条数据</span></span
          >
        </div>
        <el-table :data="mineActiveList" v-loading="initiatePage.loading" @selection-change="handleSelectionChange($event, 1)">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column prop="belong" label="任务归属">
            <template slot-scope="scope">
              <span v-if="scope.row.type != 100">{{ scope.row.belong }}</span>
              <span v-else>文件解密申请</span>
            </template>
          </el-table-column>
          <el-table-column label="文件编号/管理编号">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 100">文件解密申请-待解密</span>
              <span v-else>{{ progressLists[scope.row.processType] }}-待{{ progressTypes[scope.row.type] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="文件/记录">
            <template slot-scope="scope">
              <span v-if="scope.row.type != 100">{{ progressLists[scope.row.processType] }}-待{{ progressTypes[scope.row.type] }}</span>
              <span v-else>文件解密申请-待解密</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="任务发出时间"></el-table-column>
          <el-table-column prop="createTime" label="任务完成时间"></el-table-column>
          <el-table-column label="审批历史详情">
            <template slot-scope="scope">
              <span v-if="scope.row.type != 100">{{ progressLists[scope.row.processType] }}-待{{ progressTypes[scope.row.type] }}</span>
              <span v-else>文件解密申请-待解密</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="工作流状态">
            <template slot-scope="scope">
              <span class="warn_f" v-if="scope.row.processStatus == 8">待编制人员签名</span>
              <!-- <span class="warn_f" v-if="scope.row.isSign == -1 && scope.row.processStatus == 0"> 待签名</span> -->
              <span class="warn_f" v-if="scope.row.processStatus == 0">待审核</span>
              <span class="warn_f" v-if="scope.row.processStatus == 1">待评审</span>
              <span class="warn_f" v-if="scope.row.processStatus == 2">评审签名中</span>
              <span class="warn_f" v-if="scope.row.processStatus == 3">批准中</span>
              <span class="error_f" v-if="scope.row.processStatus == 4">审核未通过</span>
              <span class="error_f" v-if="scope.row.processStatus == 5">评审未通过</span>
              <span class="error_f" v-if="scope.row.processStatus == 6">批准未通过</span>
              <span class="success_f" v-if="scope.row.processStatus == 7">已完成</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <span class="pointer nosee_f" v-if="scope.row.type == 100">前往APP查看</span>
              <span class="main_co pointer" @click="godoaboutme(scope.row)" v-else>去查看</span>
            </template>
          </el-table-column>
          <empty slot="empty" text="暂无发起任务"></empty>
        </el-table>
        <el-card class="pub_right">
          <el-pagination @size-change="sizeChangeHandle($event, 1)" @current-change="currentChangeHandle($event, 1)" :current-page.sync="initiatePage.pageNo" :page-sizes="[4, 8, 12, 16, 20]" :page-size.sync="initiatePage.size" layout="total,sizes, prev, pager, next" :total.sync="initiatePage.total"> </el-pagination>
        </el-card>
      </basic-container>

      <basic-container>
        <div class="flex_start mb10">
          <span class="main_title">已完成任务</span>
          <el-radio-group class="ml30" v-model="finishPage.type" size="small" @change="missionAccomplished">
            <el-radio-button label="0">签名任务</el-radio-button>
            <el-radio-button label="1">解密任务</el-radio-button>
            <el-radio-button  label="2">设定期限任务</el-radio-button>
          </el-radio-group>
          <el-button type="primary" size="mini" class="ml30" icon="el-icon-refresh" @click="missionAccomplished">刷新</el-button>
          <el-button type="primary" plain size="mini" class="ml30" @click="handleDelect(2)">删除</el-button>
          <span class="ml10 nosee_f f12"
            >共 {{ finishPage.total }} 条可选数据 <span v-if="finishPage.selectList.length != 0">， 已选中 {{ finishPage.selectList.length }} 条数据</span></span
          >
        </div>
        <el-table :data="completedList" v-loading="finishPage.loading" @selection-change="handleSelectionChange($event, 2)">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column prop="belong" label="任务归属">
            <template slot-scope="scope">
              <span v-if="scope.row.type != 100">{{ scope.row.belong }}</span>
              <span v-else>文件解密申请</span>
            </template>
          </el-table-column>
          <el-table-column label="文件编号/管理编号">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 100">文件解密申请-待解密</span>
              <span v-else>{{ progressLists[scope.row.processType] }}-待{{ progressTypes[scope.row.type] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="文件/记录">
            <template slot-scope="scope">
              <span v-if="scope.row.type != 100">{{ progressLists[scope.row.processType] }}-待{{ progressTypes[scope.row.type] }}</span>
              <span v-else>文件解密申请-待解密</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="任务发出时间"></el-table-column>
          <el-table-column prop="createTime" label="任务完成时间"></el-table-column>
          <el-table-column label="审批历史详情">
            <template slot-scope="scope">
              <span v-if="scope.row.type != 100">{{ progressLists[scope.row.processType] }}-待{{ progressTypes[scope.row.type] }}</span>
              <span v-else>文件解密申请-待解密</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="工作流状态">
            <template slot-scope="scope">
              <span class="warn_f" v-if="scope.row.processStatus == 8">待编制人员签名</span>
              <!-- <span class="warn_f" v-if="scope.row.isSign == -1 && scope.row.processStatus == 0"> 待签名</span> -->
              <span class="warn_f" v-if="scope.row.processStatus == 0">待审核</span>
              <span class="warn_f" v-if="scope.row.processStatus == 1">待评审</span>
              <span class="warn_f" v-if="scope.row.processStatus == 2">评审签名中</span>
              <span class="warn_f" v-if="scope.row.processStatus == 3">批准中</span>
              <span class="error_f" v-if="scope.row.processStatus == 4">审核未通过</span>
              <span class="error_f" v-if="scope.row.processStatus == 5">评审未通过</span>
              <span class="error_f" v-if="scope.row.processStatus == 6">批准未通过</span>
              <span class="success_f" v-if="scope.row.processStatus == 7">已完成</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <span class="nosee_f pointer" v-if="scope.row.type == 100">前往APP查看</span>
              <span class="main_co pointer" @click="completedgodo(scope.row)" v-else>去查看</span>
            </template>
          </el-table-column>
          <empty slot="empty" text="暂无已完成任务"></empty>
        </el-table>
        <el-card class="pub_right">
          <el-pagination @size-change="sizeChangeHandle($event, 2)" @current-change="currentChangeHandle($event, 2)" :current-page.sync="finishPage.pageNo" :page-sizes="[4, 8, 12, 16, 20]" :page-size.sync="finishPage.size" layout="total,sizes, prev, pager, next" :total.sync="finishPage.total"> </el-pagination>
        </el-card>
      </basic-container>
    </div>
    <el-dialog title="常用功能设置(4个)" append-to-body :visible.sync="showAction" width="345px">
      <!-- <div>可设置6个常用功能</div> -->
      <div style="max-height: 500px; overflow-y: scroll">
        <el-tree :data="commonMenu" show-checkbox node-key="id" @check="checkChange" ref="treeMenu" highlight-current :props="props" :default-checked-keys="topMenu"></el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAction = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <index-completed-task ref="indexCompletedTask" @onClick="completedgodo($event)"></index-completed-task>
    <index-work-task ref="indexWorkTask" @onClick="godoaboutme($event)"></index-work-task>
  </div>
</template>

<script>
import { getagencyTaskPage, completedTaskPage, oftenmenuList, oftenmenuSubmit } from '@/api/myapi/common'
import mixin from '../../mixins/home'
import indexCompletedTask from '@/components/index-completed-task'
import indexWorkTask from '@/components/index-work-task'
export default {
  name: 'wel',
  components: {
    indexWorkTask,
    indexCompletedTask,
  },
  mixins: [mixin],
  data() {
    return {
      input3: '',
      workType: '待办任务',
      props: {
        label: 'name',
        value: 'id',
        disabled: false,
      },
      currentPage: {
        // 代办的
        pageNo: 1,
        size: 4,
        total: 0,
        loading: false,
        type: 0,
      },
      initiatePage: {
        //  发起的
        pageNo: 1,
        size: 4,
        total: 0,
        loading: false,
        type: 0,
        selectList: [],
      },
      finishPage: {
        // 完成的
        pageNo: 1,
        size: 4,
        total: 0,
        loading: false,
        type: 1,
        selectList: [],
      },
      topNodesMenu: [],
      topMenu: [],
      commonMenu: [],
      showAction: false,
      modal: true,
      showdetail: false,
      nextTask: '',
      groupNumber: '',
      progressType: '',
      // 0-创建，1-审核，2-评审，3-签名，4-批准
      activeNames: ['1', '2', '3', '5'],
      logActiveNames: ['27'],
      waiteList: [], //  代办
      completedList: [], // 已完成的
      mineActiveList: [], //  我发起的
    }
  },
  created() {
    this.refreshList()
    this.initTopMenu()
  },
  methods: {
    searchClick() {
      console.log(this.input3)
    },
    checkChange(e) {
      const menuKeysList = this.$refs.treeMenu.getCheckedKeys()
      if (menuKeysList.length >= 5) {
        this.$refs.treeMenu.setChecked(e.id, false)
      }
    },
    // 待办处理
    godo(row) {
      console.log(row.processType)
      // 0-创建，1-审核，2-评审，3-签名，4-批准
      if (row.type == '0') {
        this.nextTask = 'show' + row.processType
      } else if (row.type == '1') {
        this.nextTask = 'check' + row.processType
      } else if (row.type == '2') {
        this.nextTask = 'check' + row.processType
      } else if (row.type == '3') {
        this.nextTask = 'check' + row.processType
      } else if (row.type == '4') {
        this.nextTask = 'pizhun' + row.processType
      }
      this.showdetail = true
      this.groupNumber = row.groupNumber
      this.progressType = row.type
    },
    //   我发起 查看
    godoaboutme(row) {
      console.log(row)
      let processStatus = row.processStatus
      let processType = row.processType
      // 0-待审核，1-待评审，2-待签字，3-待批准，4-审核未通过，5-评审未通过，6-批准未通过，7-已完成
      if (processStatus == 0 || processStatus == 1 || processStatus == 3 || processStatus == 7) {
        this.nextTask = 'show' + processType
      } else if (processStatus == 4 || processStatus == 5 || processStatus == 6) {
        this.nextTask = 'creat' + processType
      } else if (processStatus == 2) {
        this.$message.warning('请前往APP端签名')
        return
      }
      this.showdetail = true
      this.groupNumber = row.id
      this.progressType = row.type
    },
    //  已完成查看
    completedgodo(row) {
      // let processStatus = row.processStatus;
      let processType = row.processType
      this.nextTask = 'show' + processType
      this.showdetail = true
      this.groupNumber = row.id
      this.progressType = row.type
    },
    handleSelectionChange(val, type) {
      if (type == 1) {
        this.initiatePage.selectList = val
      } else {
        this.finishPage.selectList = val
      }
    },
    handleDelect(type) {
      let selectList = []
      if (type == 1) {
        selectList = this.initiatePage.selectList
      } else {
        selectList = this.finishPage.selectList
      }
      if (selectList.length == 0) {
        this.$message.error('请选择要删除的任务')
        return
      }
    },
    // 获取数据列表
    refreshList() {
      this.getagencyTaskPage()
      this.launchList()
      this.missionAccomplished()
    },
    //  获取常用菜单
    initTopMenu() {
      const menu = this.$store.state.user.menu
      let myMenu = []
      menu.filter((item) => item.alias != 'menu').forEach((item) => (myMenu = myMenu.concat(item.children)))
      this.commonMenu = myMenu
      oftenmenuList().then(({ data }) => {
        if (data && data.success) {
          let dataList = data.data.records
          let topMenu = []
          if (dataList.length != 0) {
            for (let i = 0; i < dataList.length; i++) {
              let findIndex = this.commonMenu.findIndex(item=>{item.id==dataList[i].id})
              console.log(findIndex)
              if (findIndex!= -1) { topMenu.push(this.commonMenu[findIndex]) }
            }
            this.topMenu = topMenu
          }
        }
      })
    },
    //设置常用菜单
    submit() {
      let menuNodesList = this.$refs.treeMenu.getCheckedNodes()
      menuNodesList.forEach(item=>{item.menuId=item.id})
      console.log(menuNodesList)
      oftenmenuSubmit({ oftenMenu: menuNodesList }).then(({ data }) => {
        if (data && data.success) {
          this.topNodesMenu = menuNodesList
          this.showAction = false
        }
      })
    },
    //完成任务
    missionAccomplished() {
      this.finishPage.loading = true
      completedTaskPage(this.finishPage).then(({ data }) => {
        if (data && data.success) {
          this.completedList = data.data.records
          this.finishPage.total = data.data.total
          this.finishPage.loading = false
        }
      })
    },
    //发起任务
    launchList() {
      this.initiatePage.loading = true
      completedTaskPage(this.initiatePage).then(({ data }) => {
        if (data && data.success) {
          this.mineActiveList = data.data.records
          this.initiatePage.total = data.data.total
          this.initiatePage.loading = false
        }
      })
    },
    // 代办任务
    getagencyTaskPage() {
      this.currentPage.loading = true
      getagencyTaskPage(this.currentPage).then(({ data }) => {
        if (data && data.success) {
          this.waiteList = data.data.records
          this.currentPage.total = data.data.total
          this.currentPage.loading = false
        }
      })
    },
    sizeChangeHandle(val, type) {
      if (type == 0) {
        this.currentPage.size = val
        this.getagencyTaskPage()
      } else if (type == 1) {
        this.initiatePage.size = val
        this.launchList()
      } else {
        this.finishPage.size = val
        this.missionAccomplished()
      }
    },
    currentChangeHandle(val, type) {
      if (type == 0) {
        this.currentPage.pageNo = val
        this.getagencyTaskPage()
      } else if (type == 1) {
        this.initiatePage.pageNo = val
        this.launchList()
      } else {
        this.finishPage.pageNo = val
        this.missionAccomplished()
      }
    },
  },
}
</script>

<style lang="scss" scoped="scoped">
::v-deep .el-select .el-input__inner {
  padding: 0 10px;
}
::v-deep .el-radio-button__inner{
  background-color: #EBF6EE;
  border: none;
}
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
  background-color: #36A759;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.waite_title {
  position: relative;
}
.tips-con {
  font-size: 10px;
  padding: 2px;
  background: #e05242;
  color: #ffffff;
  border-radius: 50%;
  margin-left: 5px;
}
.el-divider--horizontal {
  margin: 12px 0 !important;
}

.el-font-size {
  font-size: 14px;
}
.step_line {
  display: inline-block;
  width: 12px;
  height: 2px;
}
.pie {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  // margin-right: 4px;
}
.pie.gray {
  background-color: #dce1e6;
}
</style>
